<template>
  <div style="padding: 10px;">
    <div v-for="(t, i) in list" :key="i" class="table-item">
      <h3 v-if="t.accno" v-cloak>-------{{t.accno}}--------</h3>
      <el-table
        :data="t.data"
        border
        :render-header="renderHeader"
        fit
        :row-class-name="tableRowClass"
        :row-style="tableRowStyle"
        :header-cell-style="{backgroundColor: '#f5f7fa'}"
        style="width: 100%;"
      >
        <template v-if="t.label == 1">
          <el-table-column prop="NAME0" label="股东账号"> </el-table-column>
          <el-table-column prop="WCOUNT0" label="笔数"> </el-table-column>
          <el-table-column prop="GOLD0" label="下注金额"> </el-table-column>
          <el-table-column prop="VGOLD0" label="有效金额"> </el-table-column>
          <el-table-column prop="MWINGOLD0" label="会员"> </el-table-column>
          <el-table-column prop="AWINGOLD0" label="代理商"> </el-table-column>
          <el-table-column prop="ARESULT0" label="代理商结果"> </el-table-column>
          <el-table-column prop="ARESULT0" label="总代理"></el-table-column>
          <el-table-column prop="C1RESULT0" label="股东"> </el-table-column>
          <el-table-column prop="CRESULT0" label="股东结果"> </el-table-column>
          <el-table-column prop="SGOLD0" label="股东实货量"> </el-table-column>
        </template>
        <template v-if="t.label == 2">
          <el-table-column prop="NAME0" label="总代理账号"> </el-table-column>
          <el-table-column prop="WCOUNT0" label="笔数"> </el-table-column>
          <el-table-column prop="GOLD0" label="下注金额"> </el-table-column>
          <el-table-column prop="VGOLD0" label="有效金额"> </el-table-column>
          <el-table-column prop="MWINGOLD0" label="会员"> </el-table-column>
          <el-table-column prop="AWINGOLD0" label="代理商"> </el-table-column>
          <el-table-column prop="ARESULT0" label="代理商结果"> </el-table-column>
          <el-table-column prop="SRESULT0" label="总代理结果"></el-table-column>
          <el-table-column prop="SGOLD0" label="总代理实货量"> </el-table-column>
          <el-table-column prop="SRATIO0" label="总代理百分比"></el-table-column>
          <!-- <el-table-column prop="C1RESULT0" label="股东"> </el-table-column>
          <el-table-column prop="CWINLOSS0" label="股东占成"> </el-table-column>
          <el-table-column prop="CRESULT0" label="股东结果"> </el-table-column>
          <el-table-column prop="CGOLD0" label="股东实货量"> </el-table-column>
          <el-table-column prop="CRATIO0" label="股东百分比"> </el-table-column> -->
        </template>
        <template v-if="t.label == 3">
          <!-- <el-table-column prop="NAME0" label="总代理账号"> </el-table-column>
          <el-table-column prop="AWINGOLD0" label="代理商"> </el-table-column>
          <el-table-column prop="WINLOSS0" label="代理商占成"> </el-table-column>
          <el-table-column prop="ARESULT0" label="代理商结果"> </el-table-column>
          <el-table-column prop="SGOLD0" label="总代理实货量"> </el-table-column> -->
          <el-table-column prop="NAME0" label="代理商账户"> </el-table-column>
          <el-table-column prop="WCOUNT0" label="笔数"> </el-table-column>
          <el-table-column prop="GOLD0" label="下注金额"> </el-table-column>
          <el-table-column prop="SGOLD0" label="有效金额"> </el-table-column>
          <el-table-column prop="WINGOLD0" label="会员"> </el-table-column>
          <el-table-column prop="RESULT_D0" label="代理商充值"> </el-table-column>
          <el-table-column prop="AWINGOLD0" label="代理商"> </el-table-column>
          <el-table-column prop="AWINLOSS0" label="代理商占成"> </el-table-column>
          <el-table-column prop="ARESULT0" label="代理商结果"> </el-table-column>
          <el-table-column prop="VGOLD0" label="代理商实货量"> </el-table-column>
          <el-table-column prop="SWINLOSS0" label="总代理占成"> </el-table-column>
          <el-table-column prop="SRESULT0" label="总代理结果"></el-table-column>
        </template>
      </el-table>
    </div>
  </div>
</template>

<script>
import { formatMoney } from '@/utils/index'

export default {
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      tableData: [
        {
          NAME0: 'ph380',
          WCOUNT0: formatMoney(104),
          GOLD0: formatMoney(19924.0),
          VGOLD0: formatMoney(19924.0),
          MWINGOLD0: formatMoney(14423.0),
          AWINGOLD0: formatMoney(1233),
          ARESULT0: formatMoney(123),
          C1RESULT0: formatMoney(123),
          SRESULT0: formatMoney(13333),
          CRESULT0: formatMoney(1333),
          SGOLD0: formatMoney(12333)
        }
      ]
    }
  },
  methods: {
    renderHeader (h, { column, $index }) {
      let realWidth = 0
      const span = document.createElement('span')

      span.innerText = column.label
      document.body.appendChild(span)

      realWidth = span.getBoundingClientRect().width
      column.minWidth = realWidth // 可能还有边距/边框等值，需要根据实际情况加上

      document.body.removeChild(span)
      return h('span', column.label)
    },
    tableRowStyle ({ row, rowIndex }) {
      if (rowIndex === 0) {
        return {
          backgroundColor: '#7392a6',
          color: '#ffffff'
        }
      }
      return ''
    },
    tableRowClass ({ row, rowIndex }) {
      if (rowIndex === 0) {
        return 'table-row-first'
      }
      return ''
    },
    getSummariesMethod (t) {
      return (param) => {
        return this.getSummaries(param, t)
      }
    },
    getSummaries (param, total = {}) {
      const { columns } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '总计'
          return
        }
        const key = column.property

        if (total[key] && typeof total[key] === 'string') {
          sums[index] = total[key]
        }

        // const values = data.map(item => {
        //   let val = item[column.property]
        //   if (typeof val === 'string') {
        //     val = val.replace(/,/g, '')
        //   }
        //   return Number(val)
        // })

        // if (!values.every(value => isNaN(value))) {
        //   const total = values.reduce((prev, curr) => {
        //     const value = Number(curr)
        //     if (!isNaN(value)) {
        //       return prev + curr
        //     } else {
        //       return prev
        //     }
        //   }, 0)
        //   if (!['WCOUNT0'].includes(key)) {
        //     sums[index] = formatMoney(total, 1)
        //   } else {
        //     sums[index] = total
        //   }
        // } else {
        //   sums[index] = 'N/A'
        // }
      })

      return sums
    }
  }
}
</script>

<style>
.table-row-first:hover > td {
  background-color:#7392a6 !important;
  color: #fff;
}
</style>
